<template>
  <div id="map" class="map"></div>
  <!-- <el-row>
  </el-row> -->
</template>

<script>
let toolBar = new AMap.ToolBar({
  ruler: true
})

export default {
  data() {
    return {
      map: null,
      markerArr: []
    }
  },
  mounted() {
    // let _this = this
    this.map = new AMap.Map('map', {
      //设置地图容器id
      viewMode: '3D', //是否为3D地图模式
      zoom: 14, //初始化地图级别
      center: [120.200734,36.035998], //初始化地图中心点位置
      resizeEnable: true
    })
    this.map.addControl(toolBar);
  },
  methods: {
    addMarkers(markerArr, currentNode) {
      // console.log(markerArr.length);
      this.map.remove(this.markerArr)
      this.markerArr = []
      
      markerArr.forEach((element) => {
        // 点标记显示内容，HTML要素字符串
        const markerContent = '' +
            '<div class="realtime-car-marker">' +
            '   <img src="http://106.14.186.44:9999/gps-web/rs/img/map/stts/zfz1/2.png">' +
            `   <div class="realtime-car-info">${element.name} 10km</div>` +
            '</div>';
        const marker = new AMap.Marker({
          position: [element.location.lng, element.location.lat],
          // 将 html 传给 content
          content: markerContent,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-16, -24)
        });
        this.markerArr.push(marker)
      });
      this.map.add(this.markerArr)
      if (currentNode.location) {
        this.map.setZoomAndCenter(14, [currentNode.location.lng, currentNode.location.lat]);
      }
    }
  },
}
</script>

<style lang="less">
.realtime-car-marker {
  position: relative;
}

.realtime-car-marker img {
  width: 28px;
  height: 28px;
}
.realtime-car-info {
  width: 100px;
  margin-left: -35%;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background-color: rgb(249,192,47),
}
</style>
<style lang="less" scoped>
.map {
  width: 100%;
  height: 100%;
}

// .input-card {
//   position: absolute;
//   width: 105px;
//   top: 10px;
//   left: 10px;
//   bottom: auto;
//   z-index: 9;
//   display: flex;
//   flex-direction: column;
//   min-width: 0;
//   word-wrap: break-word;
//   background-color: #fff;
//   background-clip: border-box;
//   border-width: 0;
//   box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
//   border-radius: .15rem;
//   // position: fixed;
//   // bottom: 1rem;
//   // right: 1rem;
//   // -ms-flex: 1 1 auto;
//   // flex: 1 1 auto;
//   padding: 0.75rem;
// }
// .input-item {
//   position: relative;
//   display: -ms-flexbox;
//   display: flex;
//   -ms-flex-wrap: wrap;
//   flex-wrap: wrap;
//   -ms-flex-align: center;
//   align-items: center;
//   width: 100%;
//   height: 1.5rem;
//   input {
//     margin-right: 5px;
//   }
// }
</style>